<template>
  <div>
    <div class="search" v-show="isSearchSectionVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品名字：">
          <el-input v-model="formInline.user" placeholder="请输入标签名称" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formInline.region" placeholder="请输入状态" size="mini">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
          <el-button type="primary" size="mini" @click="clean">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-button type="primary" size="mini" @click="dialogFormVisible = true">新增</el-button>
      <!-- 刷新页面 -->
      <el-button @click="refreshPage" icon="el-icon-refresh" circle style="margin-left: 83%;"></el-button>
      <el-button icon="el-icon-search" circle @click="toggleSearchSectionVisibility"></el-button>
    </el-row>
    <div class="table">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="index" width="55" label="序号">
        </el-table-column>
        <el-table-column  prop="title" label="标签名称" width="">
        </el-table-column >
        <el-table-column prop="name" label="状态" width="180">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === 1? 'primary' : 'danger'"
              disable-transitions>{{scope.row.status==1?'正常':'禁用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="isDefault" label="默认类型" width="">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isDefault === 1? 'primary' : 'primary'"
              disable-transitions>{{scope.row.isDefault==1?'自定义类型':'默认类型'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="seq" label="排序" width="">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="Number(this.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(this.total)">
      </el-pagination>
    </div>

    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      width="50%"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <template>
            <el-radio v-model="radio" label="1">正常</el-radio>
            <el-radio v-model="radio" label="0">禁用</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="列表样式">
          <template>
            <el-radio v-model="radio1" label="0">一列一个</el-radio>
            <el-radio v-model="radio1" label="1">一列两个</el-radio>
            <el-radio v-model="radio1" label="2">一列三个</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="排序">
          <template>
            <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改"
      :visible.sync="dialogFormVisible2"
      width="50%"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <template>
            <el-radio v-model="radio" label="1">正常</el-radio>
            <el-radio v-model="radio" label="0">禁用</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="列表样式">
          <template>
            <el-radio v-model="radio1" label="0">一列一个</el-radio>
            <el-radio v-model="radio1" label="1">一列两个</el-radio>
            <el-radio v-model="radio1" label="2">一列三个</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="排序">
          <template>
            <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="submitForm2">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DocumentsArticleView',

  data() {
    return {
      form: {
        createTime: "2025-02-23 16:17:12",
        deleteTime: null,
        id: 16,
        isDefault: 0,
        prodCount: 0,
        seq: 8,
        shopId: 1,
        status: 1,
        style: 0,
        t: 1740299555323,
        title: "1111",
        updateTime: "2025-02-23 16:17:12"
      },
      num: 1,
      radio1: '0',
      radio: '1',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pageSize: '10',
      total: '',
      currentPage4: 1,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 添加控制搜索区域显示状态的属性
      isSearchSectionVisible: true
    };
  },

  mounted() {
    this.show()
  },

  methods: {
    // 添加点击事件处理函数
    toggleSearchSectionVisibility() {
      this.isSearchSectionVisible =!this.isSearchSectionVisible;
    },
    ppp() {
      this.show()
      this.submitForm2()
    },
    handleChange(value) {
      console.log(value);
    },
    submitForm2() {
      this.dialogFormVisible2 = false;

      // 构造请求数据
      const requestData = {
        id: this.form.id, // 使用当前编辑行的 ID
        title: this.ruleForm.name, // 活动名称
        status: Number(this.radio), // 状态
        style: Number(this.radio1), // 列表样式
        seq: this.num, // 排序
        t: Date.now() // 时间戳
      };

      this.$axios({
        method: 'put',
        url: '/api/prod/prodTag',
        data: requestData,
        headers: {
         'Authorization': localStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res);
        this.show(); // 刷新表格数据
      })
    },
    submitForm() {
      this.$axios({
        method: `post`,
        url: `/api/prod/prodTag`,
        data: {
          id: 0,
          isDefault: null,
          prodCount: null,
          seq: this.num,
          shopId: null,
          status: Number(this.radio),
          t: Number(`${Date.now()}`),
          title: this.ruleForm.name,
          style: Number(this.radio1)
        },
        headers: {
          // 添加Authorization请求头
         'Authorization': localStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res);
        this.show()
        this.dialogFormVisible = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.show()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
      this.show()
    },
    clean() {
      this.formInline.user = ''
      this.formInline.region = ''
    },
    show() {
      let url = `/api/prod/prodTag/page?t=${Date.now()}&current=${this.currentPage4}&size=${this.pageSize}`;
      if (this.formInline.user) {
        url += `&title=${this.formInline.user}`;
      }
      if (this.formInline.region) {
        url += `&status=${this.formInline.region}`;
      }

      this.$axios({
        method: `get`,
        url: url,
        headers: {
          //添加Authorization请求头
          'Authorization': localStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleForm.name = row.title
      this.radio = String(row.status)
      this.radio1 = String(row.style)
      this.num = row.seq
      this.dialogFormVisible2 = true
      this.form = row
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: `delete`,
          url: `/api/prod/prodTag/${row.id}`,
          data: {
            t: `${Date.now()}`
          },
          headers: {
            //添加Authorization请求头
            'Authorization': localStorage.getItem('token')
          }
        }).then((res) => {
          console.log(res);
          this.show()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSubmit() {
      // 重置页码为第一页
      this.currentPage4 = 1;
      this.show();
    },
    // 新增刷新页面的方法
    refreshPage() {
      window.location.reload();
    }
  }
};
</script>

<style scoped>
.block {
  text-align: right;
}

/* 使用深度选择器修改遮罩层颜色为白色 */
::v-deep .el-dialog__wrapper {
  background-color: rgba(255, 255, 255, 0.85);
}

/* 修改对话框的背景颜色 */
::v-deep .el-dialog {
  background-color: white;
  border-radius: 8px;
}

/* 修改对话框标题的样式 */
::v-deep .el-dialog__title {
  font-size: 16px;
  font-weight: bold;
}

/* 修改对话框内容的样式 */
::v-deep .el-dialog__body {
  padding: 20px;
}

/* 修改对话框底部按钮的样式 */
::v-deep .el-dialog__footer {
  text-align: right;
  padding: 10px 20px;
  
}

/* 修改按钮的样式 */
::v-deep .el-button {
  margin-left: 10px;
}
</style>